<template>
    <div class="operate">
        <div class="box">
            <template v-if="props.back">
                <div class="back" @click="back">
                    <el-icon><ArrowLeft /></el-icon>
                    <span>返回</span>
                </div>
                <div class="divider">|</div>
            </template>

            <span>{{ title }}</span>
        </div>
        <div>
            <slot></slot>
        </div>
    </div>
</template>

<script setup name="Operate">
const { proxy } = getCurrentInstance();
const title = proxy.$router.currentRoute.value.meta.title;
const props = defineProps({
    back: { required: false, type: Boolean, default: true },
});
function back() {
    proxy.$bus.emit('back');
}
</script>
<style lang="scss" scoped>
.operate {
    min-height: 40px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* overflow: auto; */
    white-space: nowrap;
    gap: 12px;

    .box {
        display: flex;
        align-items: center;
        color: #000;

        .back {
            display: flex;
            align-items: center;
            cursor: pointer;

            .i-icon {
                margin-right: 8px;
            }
        }

        .divider {
            margin: 0 8px;
            color: #ececec;
        }
    }
}

.x-divider {
    margin: 16px 0;
}
</style>
